<template>
<el-dialog title="审核记录" :visible.sync="visible" width="700px" append-to-body :close-on-click-modal="false">
  <el-table
    :data="borrowData.amApprovalList"
    style="width: 100%">
    <el-table-column prop="approvalName" label="审核人" width="180" />
    <el-table-column prop="approvalOpinions" label="审核意见" />
    <el-table-column prop="approvalTime" label="审核时间" width="180" >
      <template slot-scope="scope">
        {{ timeFormatter(scope.row.approvalTime) }}
      </template>
    </el-table-column>
    <el-table-column prop="state" label="审核结果" >
      <template slot-scope="scope">
        <el-tag :type="statusTypeMap[scope.row.state]">{{ statusNameMap[scope.row.state] }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="备注" />
  </el-table>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>
</template>

<script>
import {getApprovalInfo} from "../../../api/am/amBorrow";
import dayjs from "dayjs";

export default {
  data() {
    return {
      title: '',
      visible: false,
      formTemp: {
        timeRange: []
      },
      form: {
        reason: '',
      },
      rules: {},
      borrowData: {
        amApprovalList: []
      },
      statusTypeMap: {
        '0': 'warning',
        '1': 'default',
        '2': 'success',
        '3': 'danger',
        '4': 'info',
        '5': 'info',
      },
      statusNameMap: {
        '0': '未提交',
        '1': '审批中',
        '2': '同意',
        '3': '驳回',
        '4': '借出',
        '5': '归还',
      }
    }
  },
  computed: {
    timeFormatter() {
      return value => dayjs(value).format('YYYY-MM-DD')
    },
  },
  methods: {
    open(borrowData) {
      getApprovalInfo(borrowData.id).then(response => {
        this.borrowData = response.data
        this.visible = true
      })
    },
    submit() {},
    cancel() {
      this.visible = false
    },
  }
}
</script>

<style lang="scss"></style>
